<template>
	<view>
		<!-- 搜索框 -->
		<view class="wx-nav">
			<view class="left">
				<image class="png-style " src="@/static/icon/search.png" ></image>
			</view>
			<input type="text" v-model="query" class="searchC"/>
			<button @click="searchToPage()" size="mini">搜索</button>
		</view>
		<span>
			历史记录
		</span>
		<view class="content">
			<button size="mini" @click="setQuery(item)" class="sitem" v-for="(item,index) in historyQuery" >{{item}}</button>
		</view>
		<!-- 清空记录 -->
		<button v-if="historyQuery.length > 0" style="margin-bottom: 20px;" @click="clearTemp" size="mini">清空记录</button>
	</view>
</template>

<script>
	import tempUtil from '@/common/shoptemp.js'
	export default {
		data() {
			return {
				query:'',
				historyQuery:[],
			}
		},
		mounted() {
			this.historyQuery = tempUtil.getSearchTemp();
		},
		methods: {
			searchToPage(){
				tempUtil.addSearchTemp(this.query);
				uni.navigateTo({
					url: "/pages/search-list/search-list?query="+this.query
				})
			},
			clearTemp(){
				tempUtil.clearSearchTemp();
				this.historyQuery=tempUtil.getSearchTemp();
			},
			setQuery(item){
				this.query = item;
			}
		}
	}
</script>

<style>
@import url("@/common/common.css");
@import url("@/common/uni.css");
.wx-nav{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 200rpx;
	width: 100%;
}

.png-style{
	width: 44rpx;
	height: 44rpx;
}
.right{
		position: absolute;
		padding-left: 80%;
}
.left{
		position: absolute;
		padding-right: 80%;
}
.searchC{
	margin-left: 20rpx;
	width: 66%;
	height: 20%; 
	border: 1px solid #444746;
	border-radius: 5rpx;
}
.content{
	width: 100%;
}
.sitem{
	float: left;
	width: 20%;
	height: 15%;
	background-color: #d9e1de;
	margin-left: 30rpx;
	border-radius: 20rpx;
}
</style>
